<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="../js/bbs.css" rel="stylesheet">
		<script src="nowtime.js"></script>
		<script src="../jquery-3.4.1.min.js"></script>
		<script>
			var now = new Date();
			var time = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
			$(function() {
				$("header>span").click(function() {
					$(".post").css("display", "block");
				})

				$(".post .btn").click(function() {
					$(".post").css("display", "none");
					let li = $("#postList li:first").clone(true);
					$("#postList").append(li);
					$("#postList li:last div img").attr("src", "../Photo/tou0" + Math.trunc(Math.random() * 4 +1) + ".jpg");
					$("#postList li:last h1").html($(".post .title").val());
					$("#postList li:last p span:first").html("板块：" + $(".post select").val())
					$("#postList li:last p span:first+span").html("发表时间：" + time);
					$(".post .title").val("");
					$(".post select").val("请选择版块");

				})

			;})
		</script>


	</head>
	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="../Photo/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="../Photo/tou01.jpg">
						</div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布">
			</div>
		</div>
	</body>
</html>
